const path = require("path");
const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.base');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin")

const config = {
  mode: "development",
  entry: "./src/index.tsx",
  output: {
    path: path.join(__dirname, "public"),
    filename: "bundle.js"
  },
  devtool: "source-map",
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname,'./public/index.html')
    }),
    new FriendlyErrorsWebpackPlugin()
  ],
  target: "web",
  // 使用devServer是不用打开watch
  // webpack serve --config webpack.dev.js
  devServer: {
    host: '127.0.0.1',  
    port: '8080',
    contentBase: path.resolve(__dirname, 'public'),// 指定静态资源路径的根目录，需要对应output:path为dist，
    open: true,
    inline: true
    // proxy: {
    //     '/api': {
    //         target: 'https://api.github.com', // http://localhost:8080/api/users -> https://api.github.com/api/users
    //         pathRewrite: {                    // http://localhost:8080/api/users -> https://api.github.com/users
    //             '^/api': ''
    //         },
    //         changeOrigin: true
    //     }
    // }
  },
};

module.exports = merge(baseConfig, config);
